<template>
  <div>
      <header class="layout">
        <div class="left">
            <img :src="detail.coverImgUrl | completeImageUrl" alt="">
            <span>{{detail.playCount | parsePlayCount}}</span>
            <span class="gedan">歌单</span>
        </div>
        <div class="right">
            <p>{{detail.name}}</p>
            <div class="right_b">
                <img :src="detail.creator.avatarUrl | mincompleteImageUrl" alt="" />
                <span>{{ detail.creator.nickname }}</span>
            </div>
        </div>
        <div class="mask">
            <img :src="detail.coverImgUrl | completeImageUrl" alt="">
        </div>
    </header>

      <section>
        
        <div class="listheader">歌曲列表<span @click="$emit('update:currentPLayList', detail.tracks)">播放所有</span></div>
        <SongListItem @click.native="$emit('update:currentSong',item)" v-for="(item, index) in detail.tracks" 
        :key="item.id" :item="item" :order="index + 1" :currentSong="currentSong"/>
      </section>  
  </div>
</template>

<script>
import SongListItem from '@/components/SongListItem.vue'
export default {
  components: {
     SongListItem,
  },
  props:{
    currentSong:Object
  },
  data: function () {
    return {
      detail: null,
    }
  },
     created: function () {
    this.getPlayListDetail(this.$route.query.id);
  },
  beforeRouteUpdate: function (to, from, next) {
    this.getPlayListDetail(to.query.id);
    next();
  },
     methods: {
    getPlayListDetail: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail", {
          params: { id },
        })
        .then((res) => {
          // console.log(res, this);
          this.detail = res.data.playlist;
        });
    },
  },
}
</script>

<style lang="less">
      .layout {
        display: flex;
        overflow: hidden;
        padding-top: 10px;
      }
     .left {
       position: relative;
       padding: 12px;
       span {
          position: absolute;
          top: 12px;
          left: 84px;
          color: #FFFFFF;
          font-size: 12px;
          padding-left: 14px;
          background: url("../assets/er.svg") no-repeat;
          background-position:0;
          background-size: 11px 10px;
       }
       .gedan {
         width: 35px;
         height: 15px;
         background-color: red;
         position: absolute;
         left: 13px;
         top: 15px;
         border-top-right-radius: 17px;
         border-bottom-right-radius: 17px
       }
       
     }
     .right {
       p {
         position: absolute;
         padding: 0;
         font-size: 17px;
         color: #FFFFFF;
         padding-right: 12px;
       }
       img {
         border-radius: 50%;
       }
     }
     .right_b {
       margin-top: 60px;
       display: flex;
       span {
         color: #FFFFFFB3;
         width: 70px;
         line-height: 30px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
     }
     .mask {
       z-index: -2;
       transform: scale(4);
       filter: blur(30px);
       height: 100px; 
       height: 200px;
     }
     .listheader {
       background-color: #EEEFF0;
       font-size: 12px;
       padding-left: 5px;
       span {
            margin-left: 72%;
       }
     }
</style>
